<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>游记明细</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/plugins/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <script src="/js/plugins/jquery/jquery.min.js"></script>
    <script src="/js/plugins/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/travelContent.css"/>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <script src="/js/common.js"></script>
    <script src="/js/plugins/My97DatePicker/WdatePicker.js"></script>
    <script src="/js/plugins/form/jquery.form.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css"/>
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <script>
        $(function () {
            var params = getParams();
            var user = JSON.parse(sessionStorage.getItem("user"));
            var travelId;
            var authorId;
            if (params.id) {
                $.get("/travels/" + params.id, function (data) {
                    travelId=data.id;
                    authorId=data.author.id;
                    console.log(data);
                    $('.travels').renderValues(data, {
                            getPerson: function (item, value) {
                                var html;
                                if (value == 1) {
                                    html = '一个人的旅行';
                                } else if (value == 2) {
                                    html = '和父母';
                                } else if (value == 3) {
                                    html = '和朋友';
                                } else if (value == 4) {
                                    html = '和同事';
                                } else if (value == 5) {
                                    html = '和爱人';
                                } else if (value == 6) {
                                    html = '和其他';
                                }
                                $(item).html(html);
                            },
                            getHref: function (item, value) {
                                var href = $(item).data("href");
                                $(item).attr("href", href + value);
                            }
                        }
                    );
                    //点赞的实现
                    if(user){
                        $.ajax({
                            url:"/users/"+travelId+"/like",
                            type:"GET",
                            success:function (data) {
                                if(data.length !=0){
                                    $("#likeBtn").removeClass("fa-thumbs-o-up").addClass("fa-thumbs-up")
                                }
                            }
                        })
                    }
                })
            }


            $("#likeBtn").click(function () {
                if(user){
                    $.ajax({
                        url:"/users/"+travelId+"/like",
                        type:"POST",
                        success:function (data) {
                            if(data.success){
                          $("#likeBtn").removeClass("fa-thumbs-o-up").addClass("fa-thumbs-up")
                            }else{
                                $.ajax({
                                    url:"/users/"+travelId+"/like",
                                    type:"DELETE",
                                })
                          $("#likeBtn").removeClass("fa-thumbs-up").addClass("fa-thumbs-o-up")

                            }
                        }
                    })

                }else{
                    $(document).dialog({
                        type : 'confirm',
                        style: 'ISO',
                        titleShow: false,
                        content: '亲,先登录再点赞哦',
                        onClickConfirmBtn: function(){
                            window.location.href="/login.html";
                        }
                    });
                }

            });
            $("#commentBtn").click(function () {
                window.location.href="/travelComment.html?travelId="+travelId+"&authorId="+authorId;
            });

        });
    </script>
</head>
<body>
<div class="search-head">
    <div class="row nav-search">
        <div class="col">
            <a href="javascript:history.go(-1);">
                <span><i class="fa fa-chevron-left"></i></span>
            </a>
        </div>
        <div class="col">
        </div>
    </div>
</div>

<div class="travels">
    <img class="cover" render-src="coverUrl">
    <div class="container">
        <h6 class="title" render-html="title"></h6>
        <small>
            <span render-html="createTime"></span>
            浏览 <span> 0</span>
            回复 <span> 0</span>
        </small>
        <div class="row">
            <div class="col-2 img">
                <a data-href="userProfiles.html?authorId=" render-key="author.id" render-fun="getHref">
                    <img class="rounded-circle" render-src="author.headImgUrl">
                </a>
            </div>
            <div class="col-6 mine">
                <small>
                    <span render-html="author.nickName"></span>
                    <a data-href="userProfiles.html?authorId="  render-key="author.id" render-fun="getHref">
                    <button class="btn" id="followBtn">关注</button></a>
                    <br>
                    <span>0 </span>篇游记
                    <span>0 </span>粉丝
                </small>
            </div>
            <div class="attention col">
                <span class="addr" render-html="place.name"></span>
            </div>
        </div>
    </div>
    <div class="container">
        <fieldset>
            <legend>我的出行信息</legend>
            <div class="d-flex">
                <div class="p-2  flex-fill">
                    <i class="fa fa-calendar"></i> 出发时间 <span render-html="travelTime"></span>
                </div>
                <div class="p-2  flex-fill"><i class="fa fa-money"></i> 人均费用
                    <span render-html="perExpends"></span></div>
            </div>
            <div class="d-flex">
                <div class="p-2  flex-fill">
                    <i class="fa fa-user-circle"></i> 人物
                    <span render-key="person" render-fun="getPerson"></span>
                </div>
                <div class="p-2  flex-fill"><i class="fa fa-clock-o"></i> 出行天数
                    <span render-html="days"></span>
                </div>
            </div>
        </fieldset>

        <div class="content" render-html="travelcontent.content">

        </div>
    </div>

    <hr>

    <div class="container d-flex">
        <div class="p-2  flex-fill">
            <i class="fa fa-thumbs-o-up" id="likeBtn"> </i>
        </div>
        <div class="p-2  flex-fill"><i class="fa  fa-commenting-o" id="commentBtn"> </i>
        </div>
        <div class="p-2  flex-fill"><i class="fa fa-star-o" id="collectBtn"> </i>
        </div>
    </div>
</div>


</body>

</html>